<template>
  <div class="editor-item" ref="ide"/>
</template>
<script setup lang="ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  from: {
    type: String,
    default: '',
  },
  to: {
    type: String,
    default: '',
  },
  renderSideBySide: {
    type: Boolean,
    default: true,
  },
});

const ide = ref<HTMLTextAreaElement>();
let diffEditor: monaco.editor.IStandaloneDiffEditor;
const updateEditor = () => {
  const originalModel = monaco.editor.createModel(
    props.from,
    'json',
  );
  const modifiedModel = monaco.editor.createModel(
    props.to,
    'json',
  );
  diffEditor?.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
};

onMounted(() => {
  if (!ide.value) return;
  diffEditor?.dispose();
  diffEditor = monaco.editor.createDiffEditor(ide.value!, {
    fontSize: 12,
    fontFamily: 'Consolas',
    readOnly: true,
    renderSideBySide: props.renderSideBySide,
  });
  updateEditor();
});

watch(props, updateEditor);
</script>
<style lang="less" scoped>
.editor-layout {
  background-color: #212223;
}

.editor-header {
  height: 40px;
  display: flex;
  color: #ddd;
  align-items: center;
  padding: 0 16px;
  z-index: 2;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.editor-container {
  display: flex;
  height: calc(100vh - 40px);
  width: 100vw;
}

.editor-item {
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.editor-files {
  width: 160px;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  padding: 12px 6px;
  background: #212223;
}

.editor-file {
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  color: #999;

  &:hover,
  &.active {
    color: #ddd;
    background-color: rgba(100, 100, 100, 0.2);
  }
}
</style>
